<template>
  <div id="my_svg"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    glassdata() {
      let my_data = this.$echarts.init(document.getElementById("my_svg"));
      my_data.setOption({
        color: ["#3398DB"],
        title: {
          text: "Top 10缺陷百分比统计",
          left: "center",
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Dot", "line", "Mura", "Patch", "NoDiaplay", "Other"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              // formatter:'{value}%'
            },
            show: true,
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "40%",
            data: [10, 52, 200, 334, 390, 30, 220],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#C33531",
                    "#C33531",
                    "#29AAE3",
                    "#29AAE3",
                    "#29AAE3",
                    "#29AAE3",
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  position: "top",
                  formatter: "{b}\n{c}%",
                  show: true,
                },
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.glassdata();
  },
};
</script>

<style  scoped>
#my_svg {
  width: 100%;
  height: 300px;
}
</style>